<template>
  <a-modal v-model:open="open"
           :width="960"
           :footer="null"
           style="top:10px"
           :title="formState.id?'修改公司':'添加公司'"
           :keyboard="false"
           :mask-closable="false"
           @cancel="handleClose">
    <a-form
        :model="formState"
        name="basic"
        class="mt20"
        layout="horizontal"
        style="width: 100%;"
        ref="formRef"
        :rules="rules"
        :label-col=" { style: { width: '150px' } }"
        :wrapper-col="{ span: 24}"
        autocomplete="off"
    >
      <a-row class="flex justify-center">
        <a-col :span="18">
          <a-form-item
              label="公司名称"
              name="name"
          >
            <a-input v-model:value.trim="formState.name" maxlength="100" placeholder="请输入公司名称"/>
          </a-form-item>

          <div v-if="!formState.id">
            <a-divider><strong>给公司绑定账号</strong></a-divider>
            <a-form-item
                label="登录账号"
                name="account"
                required
            >
              <a-input v-model:value.trim="formState.account" maxlength="100" placeholder="请填写"/>
            </a-form-item>
            <a-form-item
                label="姓名"
                name="username"
                required
            >
              <a-input v-model:value.trim="formState.username" maxlength="60" placeholder="请填写"/>
            </a-form-item>
            <a-form-item
                label="初始密码"
                name="password"
                required
            >
              <a-input v-model:value.trim="formState.password" maxlength="16" placeholder="请填写"/>
            </a-form-item>

            <a-form-item
                label="绑定角色"
                required
            >
              <a-select
                  v-model:value="roleArr"
                  mode="multiple"
                  style="width: 100%"
                  :disabled="formState.id == 1"
                  placeholder="请选择"
                  @change="handleChangeRole"
              >
                <template v-for="(role,index) in roleList" :key="index">
                  <a-select-option :value="role.id" :label="role.roleName">
                    <span>{{ role.roleName }}</span>
                  </a-select-option>
                </template>
              </a-select>
            </a-form-item>
            <a-divider></a-divider>
          </div>

          <div class="flex justify-center" style="padding: 20px 0;">
            <a-button type="primary" @click.stop.prevent="onSubmit">
              <EditOutlined v-if="formState.id"></EditOutlined>
              <PlusOutlined v-else></PlusOutlined>
              {{ formState.id ? '更新' : '保存' }}
            </a-button>
            <a-button style="margin-left: 10px" danger type="primary" @click.stop.prevent="handleClose">
              <close-outlined></close-outlined>
              关闭
            </a-button>
          </div>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>
<script setup>
const open = ref(false);
const roleList = ref([])
const roleArr = ref([])
const roleNames = ref([])
const formRef = ref({})
const emits = defineEmits(["success"])
const formState = ref({
  id:"",
  name: '',
  syscode: getUUID(),
  domain: '',
  footerHtml: '',
  logo: '',
  status: 1,
  qqlink: '',
  keywords: '',
  description: '',
  headHtml: '',
  weixinlink: '',

  account: "",
  password: "123456",
  username: "",
  // 角色IDS列表
  roleIds: "",
  // 角色列表
  roleNames: "",

});

// 验证规则
const rules = {
  name: [{required: true, message: '请输入公司名称', trigger: 'blur'}]
};

const handleChangeRole = (checkedValues) => {
  roleNames.value = roleList.value.filter(option => {
    return checkedValues.includes(option.id)
  }).map(option => option.roleName);
}

const onSubmit = async () => {
  await formRef.value.validate()
  if (roleArr.value && roleArr.value.length == 0) {
    useMessage().error("请绑定角色")
    return
  }


  if (roleArr.value && roleArr.value.length > 0) {
    formState.value.roleIds = roleArr.value.join(",")
    formState.value.roleNames = roleNames.value.join(",")
  }

  try {
    await useSaveUpdateAdminSystemApi(formState.value)
    useMessage().success("操作成功")
    handleClose()
    emits("success")
  } catch (e) {
    useMessage().error(e.msg)
  }
};

const handleLoadRoleList = async () => {
  const resp = await useLoadRoleApi({pageNo: 1, pageSize: 100})
  roleList.value = resp.data.records;
}

const handleOpen = async (record) => {
  open.value = true
  if (record && record.id) {
    formState.value.id = record.id
    const resp = await useGetAdminSystemByIdApi(record.id)
    formState.value = resp.data
  }
  await handleLoadRoleList()
}

const handleClose = () => {
  open.value = false
  formRef.value.clearValidate()
  formRef.value.resetFields()
  formState.value = {
    id: "",
    name: '',
    syscode: '',
    domain: '',
    footerHtml: '',
    logo: '',
    status: 1,
    qqlink: '',
    keywords: '',
    description: '',
    headHtml: '',
    weixinlink: '',

    account: "",
    password: "123456",
    username: "",
    // 角色IDS列表
    roleIds: "",
    // 角色列表
    roleNames: "",
  }
}

defineExpose({
  handleOpen
})
</script>

<style lang="scss" scoped>
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    overflow: auto;
    border-radius: 0px;
  }

  :where(.css-dev-only-do-not-override-1hsjdkk).ant-modal .ant-modal-header {
    background: transparent;
  }

  .ant-modal-body {
    flex: 1;
  }
}
</style>